1
00:00:01,210 --> 00:00:01,990
Tudo bem, meus amigos.

2
00:00:01,990 --> 00:00:05,380
Chega desse exemplo bobo de cor de fundo que todo mundo faz.

3
00:00:05,380 --> 00:00:07,710
Vamos transformar isso em algo um pouco mais interessante.

4
00:00:07,720 --> 00:00:12,400
Vamos cumprir o objetivo original aqui, que era nos permitir ter um substituto

5
00:00:12,490 --> 00:00:15,080
para a directiva relativa à classe energética.

6
00:00:15,120 --> 00:00:20,950
Bem, o que realmente precisamos fazer aqui é fazer algumas atualizações neste centro de cores de fundo, em vez de

7
00:00:20,950 --> 00:00:22,750
definindo algum tipo de cor de fundo.

8
00:00:22,750 --> 00:00:24,350
Vou mudar o nome disso.

9
00:00:24,400 --> 00:00:32,660
Algo como set lasts sobre nomes de classes apenas para diferenciá-lo da palavra-chave class agora

10
00:00:32,710 --> 00:00:35,240
nosso argumento para isso será um objeto.

11
00:00:35,270 --> 00:00:40,100
Lembre-se de que estamos tentando reimplementar a diretiva de classe de energia do objeto fornecido.

12
00:00:40,100 --> 00:00:44,990
teremos algumas chaves, essas chaves eventualmente acabarão como classes que iremos aplicar

13
00:00:44,990 --> 00:00:49,940
ao nosso elemento subjacente e, em seguida, para cada chave, precisamos dar uma olhada e ver se isso ou não

14
00:00:49,940 --> 00:00:56,450
expressão é avaliada como verdadeira ou falsa em vez de receber o argumento da cor ali mesmo.

15
00:00:56,490 --> 00:00:59,980
Vou receber um argumento da classe Obi J.

16
00:01:00,000 --> 00:01:08,990
Abreviação de object e vou anotar isso como sendo do tipo any, então vou substituir a lógica

17
00:01:08,990 --> 00:01:09,890
lá dentro.

18
00:01:09,890 --> 00:01:18,940
Vamos usar quatro letras e na aula de E.J. loop sabe que este é um loop for in.

19
00:01:18,950 --> 00:01:24,840
Você pode usar um loop for in para iterar sobre as chaves de um objeto, que é exatamente o que queremos fazer.

20
00:01:24,850 --> 00:01:29,710
Agora, a chave aqui será realmente como o nome da classe que queremos aplicar ao nosso elemento.

21
00:01:30,010 --> 00:01:34,960
E então, se procurarmos a chave dentro desse objeto, isso nos dará o valor booleano que realmente

22
00:01:34,960 --> 00:01:35,500
se preocupa.

23
00:01:36,280 --> 00:01:41,090
Podemos dizer se o último Obi J está no tom se isso for verdade.

24
00:01:41,170 --> 00:01:46,570
Então, se qualquer expressão fornecida for avaliada como verdadeira e quisermos pegar essa chave e aplicá-la

25
00:01:46,720 --> 00:01:52,780
como uma classe para o nosso elemento subjacente, mas fazê-lo dentro da instrução if dirá este elemento ponto

26
00:01:52,990 --> 00:02:03,070
elemento não nativo, você usará a API da lista de classes que chamaremos de adicionar um complemento nessa chave e podemos lidar com

27
00:02:03,070 --> 00:02:04,070
o outro caso.

28
00:02:04,090 --> 00:02:09,720
Portanto, no caso em que qualquer chave que acabamos de pesquisar for avaliada como falsa, veremos isso

29
00:02:09,720 --> 00:02:17,780
elemento inicial, não lista de classes de elementos nativos, mas neste caso vamos remover irritado que você remova

30
00:02:18,720 --> 00:02:19,950
a chave dada.

31
00:02:19,970 --> 00:02:24,670
Lembre-se de que quando digo chave, estou realmente falando de uma aula que queremos aplicar, ok.

32
00:02:24,710 --> 00:02:26,280
Digamos isso.

33
00:02:26,330 --> 00:02:31,910
Agora vamos olhar para trás e vou até aquele H para o elemento com o qual estávamos trabalhando.

34
00:02:31,910 --> 00:02:34,420
Esta directiva está agora completamente redesenhada.

35
00:02:34,430 --> 00:02:36,050
Sophie, você executa esse código aqui.

36
00:02:36,050 --> 00:02:39,740
Teremos alguns resultados ruins, então vou excluir esse uso.

37
00:02:39,770 --> 00:02:43,570
Vou examinar todas as diretrizes de classe energética que temos aqui.

38
00:02:43,640 --> 00:02:47,930
Vou substituí-los pela diretiva de classe de aplicativo que acabamos de criar.

39
00:02:48,060 --> 00:02:58,390
Posso substituir a classe de energia pela classe de aplicativo, a classe de energia pela classe de aplicativo e a classe de energia pela classe de aplicativo.

40
00:02:58,520 --> 00:03:04,070
Então digamos que olhe para trás e você notará que todo o aplicativo ainda está funcionando exatamente

41
00:03:04,070 --> 00:03:06,980
como era antes, sem erros.

42
00:03:06,980 --> 00:03:08,150
Bem, ainda não há erros.

43
00:03:08,330 --> 00:03:13,130
Podemos dar uma olhada e ver que com certeza aquele primeiro botão ali tem a classe deficiente e

44
00:03:13,130 --> 00:03:16,220
temos a classe ativa no botão selecionado.

45
00:03:16,220 --> 00:03:22,030
Posso começar a acertar em seguida e todos eles são atualizados apropriadamente e quando começo a chegar ao final do

46
00:03:22,040 --> 00:03:27,880
listar 20 para o próximo botão também fica ótimo.

47
00:03:28,150 --> 00:03:28,930
Então é isso.

48
00:03:28,930 --> 00:03:32,990
Agora criamos nosso próprio posicionamento habitual para classe de energia.

49
00:03:33,100 --> 00:03:37,600
Acho que você pode concordar comigo que, no final das contas, a lógica real presente nisso não é a

50
00:03:37,600 --> 00:03:39,080
pior coisa do mundo.

51
00:03:39,170 --> 00:03:44,260
É realmente apenas entender tudo isso como especial em decoradores e setters de entrada e toda essa loucura

52
00:03:44,260 --> 00:03:47,360
coisas que tornam essas coisas diretivas realmente complicadas.

53
00:03:47,380 --> 00:03:51,960
Depois de entender que todo o resto começa a ficar realmente fácil, tudo bem.

54
00:03:52,040 --> 00:03:53,260
Vamos fazer uma rápida pausa aqui.

55
00:03:53,330 --> 00:03:58,240
Quando voltarmos no próximo vídeo, começaremos a trabalhar em nossa própria diretiva estrutural personalizada.

56
00:03:58,250 --> 00:04:00,130
Isso aqui é uma diretiva de atributo.

57
00:04:00,260 --> 00:04:04,640
Faremos um muito diferente, muito semelhante à diretiva de energia.

58
00:04:04,690 --> 00:04:06,840
Pausa rápida e vejo você em apenas um minuto.